<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #table {
            border: 1px solid red;
            border-spacing: 0;
            border-collapse: collapse;
            width: 100%;
        }

        #table tr td {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    行数:<input type="text" name="" id="num1">
    列数: <input type="text" name="" id="num2">
    <button id="btn">点击生成</button>
    <table id="table"></table>
    <script>
        // //给btn添加事件
        // btn.onclick = function () {
        //     var n1 = num1.value;
        //     var n2 = num2.value;
        //     var res = '';
        //     for (var i = 0; i < n1; i++) {
        //         res += '<tr>';
        //         for (var j = 0; j < n2; j++) {
        //             res += '<td>' + j + '</td>'
        //         }
        //         res += '</tr>'
        //     }
        //     table.innerHTML = res;
        // }

        // btn.onclick = function () {
        //     // 获取 num1 和num2 的值
        //     var n1 = num1.value;
        //     var n2 = num2.value;

        //     // 用来存放 循环生成的 HTML结构
        //     var res = '';
        //     // 有行和列必须使用循环嵌套

        //     // 外层循环实现行
        //     for (var i = 0; i < n1; i++) {
        //         res += '<tr>'
        //         // 内层循环实现列
        //         for (var j = 0; j < n2; j++) {
        //             res += '<td>' + j + '</td>'
        //         }
        //         res += '</tr>'
        //     }
        //     table.innerHTML = res;
        // }

        btn.onclick = function () {
            var n1 = num1.value;
            var n2 = num2.value;
            var res = '';
            for (var i = 0; i < n1; i++) {
                res += '<tr>'
                for (var j = 0; j < n2; j++) {
                    res += '<td> ' + j + ' </td>'
                }
                res += '</tr>'
            }
            table.innerHTML = res;
        }




    </script>
</body>

</html>